<template>
	<view class="goods-box" @click="goGoodsDetail">
		<image class="goods-image" :src="goods_info.goodsimage_text" mode=""></image>
		<view class="goods-info-box">
			<view class="fz15 goods-title mb10">
				{{goods_info.goodsname}}
			</view>
			<view class="fz12 c-e80000 mb10">
				<text class="fz18">{{goods_info.goodsprice|xiaos}}</text>
				金币+
				<text class="fz18">{{goods_info.goodssalenum|xiaos}}</text>
				积分
			</view>
			<view class="goods-subheading fz15 c-fff">
				{{goods_info.desc}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			goods_info: {
				default: {},
				type: Object
			}, // 商品信息
		},
		filters: {
			// 过滤小数点后面数据
			xiaos(num) {
				return Math.trunc(num)
			},
		},
		mounted() {
		},
		methods: {
			// 跳转商品详情
			goGoodsDetail() {
				this.$emit('goGoodsDetail',this.goods_info.id)
			},
		}
	}
</script>

<style lang="scss">
	.goods-box{
		border-radius: 13rpx;
		background-color: #ffffff;
		display: inline-block;
		width: 340rpx;
		.goods-image{
			width: 340rpx;
			height: 340rpx;
			display: block;
		}
		.goods-info-box{
			padding: 30rpx 20rpx 35rpx;
			text-align: center;
			word-break: break-all;
			.goods-subheading{
				background: linear-gradient(0deg,#b07412 0%, #e3ba5b 100%);
				height: 50rpx;
				line-height: 50rpx;
			}
			.goods-title{
				overflow:hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow:ellipsis;
			}
		}
	}
</style>